<!DOCTYPE html>
<html>
<head>
    <title>Events</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">
            <ul id="panelbar">
                <li class="k-state-active">
                    Metallica - Master of Puppets 1986
                    <ul>
                        <li>Battery</li>
                        <li>Master of Puppets</li>
                        <li>The Thing That Should Not Be</li>
                        <li>Welcome Home (Sanitarium)</li>
                        <li>Disposable Heroes</li>
                        <li>Leper Messiah</li>
                        <li>Orion (Instrumental)</li>
                        <li>Damage, Inc.</li>
                    </ul>
                </li>
                <li>
                    Iron Maiden - Brave New World 2000
                    <ul>
                        <li>The Wicker Man</li>
                        <li>Ghost Of The Navigator</li>
                        <li>Brave New World</li>
                        <li>Blood Brothers</li>
                        <li>The Mercenary</li>
                        <li>Dream Of Mirrors</li>
                        <li>The Fallen Angel</li>
                        <li>The Nomad</li>
                        <li>Out Of The Silent Planet</li>
                        <li>The Thin Line Between Love And Hate</li>
                    </ul>
                </li>
                <li>
                    Empty Item
                </li>
                <li>
                    Ajax Item
                    <div></div>
                </li>
                <li>
                    Error Item
                    <div></div>
                </li>
            </ul>
        </div>
        <script>
            function onSelect(e) {
                kendoConsole.log("Select: " + $(e.item).find("> .k-link").text());
            }

            function onExpand(e) {
                kendoConsole.log("Expand: " + $(e.item).find("> .k-link").text());
            }

            function onCollapse(e) {
                kendoConsole.log("Collapse: " + $(e.item).find("> .k-link").text());
            }

            function onActivate(e) {
                kendoConsole.log("Activate: " + $(e.item).find("> .k-link").text());
            }

            function onContentLoad(e) {
                kendoConsole.log("Content loaded in <b>"+ $(e.item).find("> .k-link").text() +
                                 "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
            }

            function onError(e) {
                kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
            }

            $("#panelbar").kendoPanelBar({
                expandMode: "single",
                select: onSelect,
                expand: onExpand,
                collapse: onCollapse,
                activate: onActivate,
                contentLoad: onContentLoad,
                error: onError,
                contentUrls: [ , , , "../../content/web/panelbar/ajax/ajaxContent1.html", "error.html" ]
            }).css({ width: "250px" }).css({ margin: "20px auto" });
        </script>
        <div class="console"></div>

</body>
</html>
